<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>随便打TCS系统</title>
    <!-- Bootstrap -->
    <link href="<%=basePath%>vendors/bootstrap/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <!-- Font Awesome -->
    <link
            href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
            rel="stylesheet">
    <!-- Select2 -->
    <link href="<%=basePath%>vendors/select2/dist/css/select2.min.css"
          rel="stylesheet">
    <!-- NProgress -->
    <link href="<%=basePath%>vendors/nprogress/nprogress.css"
          rel="stylesheet">
    <!-- iCheck -->
    <link href="<%=basePath%>vendors/iCheck/skins/flat/green.css"
          rel="stylesheet">

    <!-- bootstrap-progressbar -->
    <link
            href="<%=basePath%>vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css"
            rel="stylesheet">
    <!-- JQVMap -->
    <link href="<%=basePath%>vendors/jqvmap/dist/jqvmap.min.css"
          rel="stylesheet"/>
    <!-- bootstrap-daterangepicker -->
    <link
            href="<%=basePath%>vendors/bootstrap-daterangepicker/daterangepicker.css"
            rel="stylesheet">

    <!-- Custom Theme Style -->
    <link href="<%=basePath%>build/css/custom.min.css" rel="stylesheet">

    <!-- 富文本  -->
    <link href="<%=basePath%>static/css/quill.snow.css" rel="stylesheet">
    <link href="<%=basePath%>Content/Layui-KnifeZ/css/layui.css" rel="stylesheet"/>
    <%--<link href="<%=basePath%>css/messenger-theme-future.css"--%>
    <%--rel="stylesheet">--%>
    <%--<link href="<%=basePath%>css/messenger.css"--%>
    <%--rel="stylesheet">--%>

</head>

<body class="nav-md">
<div class="container body">
    <div class="main_container">
        <div class="col-md-3 left_col">
            <div class="left_col scroll-view">
                <div class="clearfix"></div>
                <br/>
            </div>
        </div>

        <!-- page content -->
        <div class="right_col" role="main">
            <div class="">
                <div class="page-title">
                    <div class="title_left">
                        <h3>旅游管理</h3>
                    </div>


                </div>
                <div class="clearfix"></div>

                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="x_panel">
                            <div class="x_title">
                                <h2>创建一个新的项目</h2>

                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content">
                                <form name="myForm" class="form-horizontal form-label-left"
                                      novalidate method="post" enctype="multipart/form-data"
                                      id="formUpload">

                                    <p>
                                        您需要将以下内容填写完整后才可以创建模块，如有疑问请
                                        <code>联系客服</code>
                                        以帮助您完成相关配置以及信息完善
                                    </p>
                                    <span class="section">基本信息</span>
                                    <div class="item form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12"
                                               for="goodstext">项目名 <span class="required">*</span>
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input id="goodstext" class="form-control col-md-7 col-xs-12"
                                                   name="goodstext" placeholder="请输入文字" required="required"
                                                   type="text" value="">
                                        </div>
                                    </div>
                                    <div class="item form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12"
                                               for="">分类<span class="required">*</span>
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <select class="form-control" id="firstclassify">
                                                <c:forEach items="${tourCategory}" var="s" varStatus="z">
                                                    <option value="${s.id}">${s.category}</option>
                                                </c:forEach>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="item form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12"
                                               for="price">金额<span class="required">*</span>
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input id="price" class="form-control col-md-7 col-xs-12"
                                                   name="price" placeholder="" required="required"
                                                   type="text" value="">
                                        </div>
                                    </div>
                                    <div class="item form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12"
                                               for="showpic">展示图片
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input class="form-control col-md-7 col-xs-12" id="showpic"
                                                   name="showpic" type="file"
                                                   placeholder="请先上传图片" form="formUpload">
                                        </div>
                                    </div>
                                    <div class="item form-group" id="pic1">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12"
                                               for="detailpic1">详情图片1
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input class="form-control col-md-7 col-xs-12" id="detailpic1"
                                                   name="detailpic1" type="file"
                                                   placeholder="请先上传图片" form="formUpload">
                                        </div>
                                        <span id="button1"><a type="button" class="btn btn-default"
                                                              href="javascript:void(0)">添加</a></span>
                                    </div>
                                    <div class="item form-group" id="pic2" style="display: none">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12"
                                               for="detailpic2">详情图片2
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input class="form-control col-md-7 col-xs-12" id="detailpic2"
                                                   name="detailpic2" type="file"
                                                   placeholder="请先上传图片" form="formUpload">
                                        </div>
                                        <span id="button2"><a type="button" class="btn btn-default"
                                                              href="javascript:void(0)">添加</a></span>
                                    </div>
                                    <div class="item form-group" id="pic3" style="display: none">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12"
                                               for="detailpic3">详情图片3
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input class="form-control col-md-7 col-xs-12" id="detailpic3"
                                                   name="detailpic3" type="file"
                                                   placeholder="请先上传图片" form="formUpload">
                                        </div>
                                        <span id="button3"><a type="button" class="btn btn-default"
                                                              href="javascript:void(0)">添加</a></span>
                                    </div>
                                    <div class="item form-group" id="pic4" style="display: none">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12"
                                               for="detailpic4">详情图片4
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input class="form-control col-md-7 col-xs-12" id="detailpic4"
                                                   name="detailpic4" type="file"
                                                   placeholder="请先上传图片" form="formUpload">
                                        </div>
                                    </div>
                                    <div class="item form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12"
                                               for="introduce">简介<span class="required">*</span>
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input id="introduce" class="form-control col-md-7 col-xs-12"
                                                   name="introduce" placeholder="请输入文字"
                                                   type="text" value="">
                                        </div>
                                    </div>

                                    <div class="item form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12"
                                               for="layeditDemo">产品特色<span class="required">*</span>
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <div>
                                                <textarea id="layeditDemo" lay-verify="content"></textarea>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="ln_solid"></div>
                                    <div class="form-group">
                                        <div class="col-md-6 col-md-offset-3">
                                            <a type="submit" class="btn btn-primary"
                                               href="javascript:void(0)"
                                               onclick="history.back(-1);">取消</a> <input
                                                id="add" type="button" class="btn btn-success"
                                                href="javascript:void(0)" value="发布">
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 富文本 -->
        <script src="<%=basePath%>static/js/katex.min.js"></script>
        <script src="<%=basePath%>static/js/highlight.min.js"></script>
        <script src="<%=basePath%>static/js/quill.js"></script>
        <script src="<%=basePath%>static/js/quill.min.js"></script>
        <!-- Initialize Quill editor -->
        <script src="<%=basePath%>static/js/jquery-1.7.1.min.js"></script>

        <%--<script>--%>
        <%--$(function () {--%>
        <%--$._messengerDefaults = {--%>
        <%--extraClasses: 'messenger-fixed messenger-theme-future messenger-on-bottom messenger-on-right'--%>
        <%--}--%>
        <%--})--%>
        <%--</script>--%>
        <script>
            var quill = new Quill('#editor-container', {
                modules: {
                    formula: true,
                    syntax: true,
                    toolbar: '#toolbar-container'
                },
                placeholder: '请输入内容',
                theme: 'snow'
            });
        </script>

        <!-- 上传图片并添加-->
        <script src="<%=basePath%>vendors/jquery/dist/jquery.min.js"></script>
        <script>
            $("#button1").click(function () {
                $("#button1").css("display", "none");
                $("#pic2").css("display", "block");
            });
            $("#button2").click(function () {
                $("#button2").css("display", "none");
                $("#pic3").css("display", "block");
            });
            $("#button3").click(function () {
                $("#button3").css("display", "none");
                $("#pic4").css("display", "block");
            });
        </script>
        <script type="text/javascript">
            // ajax 对象
            function ajaxObject() {
                var xmlHttp;
                try {
                    // Firefox, Opera 8.0+, Safari
                    xmlHttp = new XMLHttpRequest();
                } catch (e) {
                    // Internet Explorer
                    try {
                        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                    } catch (e) {
                        try {
                            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                        } catch (e) {
                            alert("您的浏览器不支持AJAX！");
                            return false;
                        }
                    }
                }
                return xmlHttp;
            }

            $('#add').click(function () {
                // 上传文件
                var showpic = $("#showpic")[0].files[0];
                var detailpic1 = $("#detailpic1")[0].files[0];
                var detailpic2 = $("#detailpic2")[0].files[0];
                var detailpic3 = $("#detailpic3")[0].files[0];
                var detailpic4 = $("#detailpic4")[0].files[0];
                var show = "";
                var pic1 = "";
                var pic2 = "";
                var pic3 = "";
                var pic4 = "";

                if (showpic != null || showpic != undefined) {
                    var fileName = showpic.name.substring(showpic.name.lastIndexOf(".") + 1).toLowerCase();
                    if (fileName != "jpg" && fileName != "jpeg" && fileName != "png" && fileName != "gif") {
                        alert("只能上传 .jpg .png .jpeg .gif类型的文件");
                        return false;
                    }
                    show = addfile(showpic);
                }
                if (detailpic1 != null || detailpic1 != undefined) {
                    var fileName = detailpic1.name.substring(detailpic1.name.lastIndexOf(".") + 1).toLowerCase();
                    if (fileName != "jpg" && fileName != "jpeg" && fileName != "png" && fileName != "gif") {
                        alert("只能上传 .jpg .png .jpeg .gif类型的文件");
                        return false;
                    }
                    pic1 = addfile(detailpic1);
                }
                if (detailpic2 != null || detailpic2 != undefined) {
                    var fileName = detailpic2.name.substring(detailpic2.name.lastIndexOf(".") + 1).toLowerCase();
                    if (fileName != "jpg" && fileName != "jpeg" && fileName != "png" && fileName != "gif") {
                        alert("只能上传 .jpg .png .jpeg .gif类型的文件");
                        return false;
                    }
                    pic2 = addfile(detailpic2);
                }
                if (detailpic3 != null || detailpic3 != undefined) {
                    var fileName = detailpic3.name.substring(detailpic3.name.lastIndexOf(".") + 1).toLowerCase();
                    if (fileName != "jpg" && fileName != "jpeg" && fileName != "png" && fileName != "gif") {
                        alert("只能上传 .jpg .png .jpeg .gif类型的文件");
                        return false;
                    }
                    pic3 = addfile(detailpic3);
                }
                if (detailpic4 != null || detailpic4 != undefined) {
                    var fileName = detailpic4.name.substring(detailpic4.name.lastIndexOf(".") + 1).toLowerCase();
                    if (fileName != "jpg" && fileName != "jpeg" && fileName != "png" && fileName != "gif") {
                        alert("只能上传 .jpg .png .jpeg .gif类型的文件");
                        return false;
                    }
                    pic4 = addfile(detailpic4);
                }

                ajaxPost(show, pic1, pic2, pic3, pic4);

            });

            function addfile(file) {
                var fm = new FormData();
                fm.append('file', file);
                $.ajax({
                    url: "<%=basePath%>layfile/uploadFile1",
                    type: 'POST',
                    data: fm,
                    async: false,
                    contentType: false, //禁止设置请求类型
                    processData: false, //禁止jquery对DAta数据的处理,默认会处理
                    //禁止的原因是,FormData已经帮我们做了处理
                    success: function (result) {
                        file = result.json;
                    }
                });
                return file;
            }

            function ajaxPost(show, pic1, pic2, pic3, pic4) {

                var json = {};        //将数据组成JSON串
                json.goodstext = $("#goodstext").val();
                json.introduce = $("#introduce").val();
                json.price = $("#price").val();
                json.context = $('#LAY_layedit_1').contents().find("body").html();
                json.firstclassify = $("#firstclassify").find("option:selected").val();
                json.showpic = show;
                json.detailpic1 = pic1;
                json.detailpic2 = pic2;
                json.detailpic3 = pic3;
                json.detailpic4 = pic4;
                var obj = JSON.stringify(json);
                // if()   goodstext firstclassify price derate stock
                if (json.goodstext == "" || json.goodstext == undefined || json.goodstext == null) {
                    $("#goodstext").focus();
                    $("#goodstext").blur();

                } else if (json.firstclassify == "" || json.firstclassify == undefined || json.firstclassify == null) {
                    $("#goodstext").focus();
                    $("#goodstext").blur();

                } else if (json.price == "" || json.price == undefined || json.price == null) {
                    $("#price").focus();
                    $("#price").blur();
                } else {
                    var ajax = ajaxObject();
                    ajax.open("post", "insertTourGoodsbyjson", true);
                    ajax.setRequestHeader("Content-Type", "application/json");
                    ajax.onreadystatechange = function () {
                        if (ajax.readyState == 4) {
                            if (ajax.status == 200) {
                                var result = ajax.responseText;
                                if (result == "success") {
                                    //请求成功
                                    alert("添加成功");
                                    location.href = "tourGoods";
                                } else {
                                    //创建失败
                                    alert(result);
                                }
                            } else if (ajax.status == 0) {
                                //请求失败
                                alert("您使用的火狐浏览器不支持本次操作，请更换浏览器重试");
                            } else {
                                //请求失败
                                alert("请求终止，请检查操作或联系客服咨询" + ajax.status);
                            }
                        } else {
                        }
                    };
                    ajax.send(obj);
                }
            }


        </script>

        <script type="text/javascript">
            // ajax post请求：
            function secondCategory() {
                var firstclassify = $("#firstclassify").find("option:selected").val();

                $.ajax({
                    url: "nextCategory",
                    type: 'POST',
                    dataType: 'json',
                    async: false,
                    data: {
                        "topid": firstclassify
                    },
                    success: function (data) {
                        var str;
                        $.each(data, function (i, item) {
                            var category = item.category;
                            var id = item.id;
                            str += '<option value=' + id + '>' + category + '</option>';
                            $("#secondclassify").html(str);
                        })
                    }
                });
            }

        </script>
    </div>
</div>

<!-- jQuery -->
<script src="<%=basePath%>vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="<%=basePath%>vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="<%=basePath%>vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="<%=basePath%>vendors/nprogress/nprogress.js"></script>
<!-- bootstrap-daterangepicker -->
<script src="<%=basePath%>vendors/moment/min/moment.min.js"></script>
<script
        src="<%=basePath%>vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- Chart.js -->
<script src="<%=basePath%>vendors/Chart.js/dist/Chart.min.js"></script>
<!-- validator -->
<script src="<%=basePath%>vendors/validator/validator.js"></script>
<!-- Custom Theme Scripts -->
<script src="<%=basePath%>build/js/custom.min.js"></script>
<!-- Select2 -->
<script src="<%=basePath%>vendors/select2/dist/js/select2.full.min.js"></script>
<%--<script src="<%=basePath%>js/messenger.min.js"></script>--%>

<script src="<%=basePath%>Content/Layui-KnifeZ/layui.js"></script>
<script src="<%=basePath%>Content/ace/ace.js"></script>
<script>
    console.log("nihao");
    layui.use(['layedit', 'layer', 'jquery'], function () {
        var $ = layui.jquery;
        var layedit = layui.layedit;
        layedit.set({
            //暴露layupload参数设置接口 --详细查看layupload参数说明
            uploadImage: {
                url: '<%=basePath%>layfile/uploadFile1',
                accept: 'image',
                acceptMime: 'image/*',
                exts: 'jpg|png|gif|bmp|jpeg',
                size: '10240'
            }
            , uploadVideo: {
                url: '/Attachment/LayUploadFile',
                accept: 'video',
                acceptMime: 'video/*',
                exts: 'mp4|flv|avi|rm|rmvb',
                size: '20480'
            }
            //右键删除图片/视频时的回调参数，post到后台删除服务器文件等操作，
            //传递参数：
            //图片： imgpath --图片路径
            //视频： filepath --视频路径 imgpath --封面路径
            , calldel: {
                url: '/Attachment/DeleteFile'
            }
            //开发者模式 --默认为false
            , devmode: false
            //插入代码设置
            , codeConfig: {
                hide: true,  //是否显示编码语言选择框
                default: 'javascript' //hide为true时的默认语言格式
            }
            , tool: [
                'html', 'code', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'fontFomatt', 'colorpicker', 'face'
                , '|', 'left', 'center', 'right', '|', 'link', 'unlink', 'image_alt', 'video', 'anchors'
                , '|', 'fullScreen'
            ]
            , height: '90%'
        });
        var ieditor = layedit.build('layeditDemo');

        form.verify({
            content: function (value) {
                return layedit.sync(ieditor);
            }
        });

    })
</script>
</body>
</html>